<!--echarts  -->
<template>
  <div class="echarts">
    <div ref="echartsRef" :style="{ width: width, height: height }"></div>
  </div>
</template>
<script setup lang='ts' >
import { ref, onMounted, PropType, watchEffect } from 'vue'
import userEcharts from "../hooks/userEcharts"

const echartsRef = ref<HTMLElement>()

const props = defineProps({
  options: {
    type: Object,
    required: true
  },
  width: {
    type: String,
    default: () => '100%'
  },
  height: {
    type: String,
    default: () => '300px'
  }
})
onMounted(() => {
  const { setOptions } = userEcharts(echartsRef.value!)
  watchEffect(() => {
    setOptions(props.options)
  })
})

</script>
<style lang='less' scoped>
</style>
